@import "./../../../assets/scss/index.scss";

$radius:pxTorem(4px);
$fontSize-50:pxTorem(50px);
$fontSize-42:pxTorem(42px);
$fontSize-40:pxTorem(40px);
$fontSize-35:pxTorem(35px);
$fontSize-30:pxTorem(30px);
$fontSize-25:pxTorem(25px);
$fontSize-20:pxTorem(20px);
$titleFontSize:$fontSize-25;
$boxMargin:pxTorem(5px);
$contentRowPadding: pxTorem(10px);
$contentColPadding: pxTorem(15px);
$height-4:pxTorem(4px);
$height-80:pxTorem(80px);
$height-40:pxTorem(40px);
$width-50:pxTorem(50px);

$timeOutColor: #d92b2b;
$contentBackgroud:#e4e4e4;
$orderBorderColor: #999999;

$labelHeight: pxTorem(40px);
$orderPadding:pxTorem(5px);
:host{width: 100%;height: 100%;display: block;}

.active-color{
    color: $mpj-primary;
}

.cookied_order{
    color: #333333;
    background: #1a1a1a;
    .material-icons{
        font-size: $fontSize-35 !important;
    }
    
}

.center{
    text-align: center;
}

.order_box{
    height: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    
    &>div{       
        border: 1px solid $orderBorderColor;
        &:last-child{
            margin-bottom: $orderPadding !important;
            margin-left: $orderPadding;
            margin-right: $orderPadding;
        }
    }
    .top{
        &>span{
            padding:$orderPadding;
            &:first-child{
                padding-left: 0;
            }
            &:last-child{
                padding-right: 0;
            }
        }
        color: #fff;
        border-bottom: 0;
        padding: $contentColPadding $contentRowPadding;
        background: #515c63;
        margin: $orderPadding $orderPadding 0 $orderPadding;
    }
    .content{
        flex: 1;
        position: relative;
        background: $contentBackgroud;
        margin: 0 $orderPadding;
    }
    .content_detail{
        height: 100%;
        position: absolute;
        box-sizing: border-box;
        width: 100%;
        padding-bottom: pxTorem(60px);
    }
    .bottom{
        padding: 0;
        border-top:0;
    }
    
    .order_title{
        font-size: $titleFontSize;
    }
}
.suspended_order{
    display: flex;
    background: #fff;
    justify-content: space-between;
    border-bottom: 1px solid $orderBorderColor;
    .order_number{
        display: flex;
        align-items: center;
        font-size: $fontSize-20;
    }
    .number_tip{
        white-space: nowrap;
    }
    .material-icons{
        font-size: $fontSize-42;
    }
    .pickup{
        text-align: center;
        display: inline-block;
        width: $height-40;
        height: $height-40;
        line-height: $height-40;
        border-radius: $radius;
        background: #348728;
        color: white;
        font-size: 23px;
        margin-right: 8px;
    }
    .order_name{
        flex: 1;
        width: 64%;
        word-break:break-all;
        line-height: pxTorem(40px);
        padding: $contentColPadding $contentRowPadding;
        font-size: pxTorem(23.2px);
    }
    
    &.timeout_order{
        background: $timeOutColor;
    }
    &.timeout_order,
    &.active_lable {
        color: #fff;
    }
    &.active_lable,
    &.timeout_order.active_lable{
        background: #3a8bbf;
    }
}

.order_list{
    height: 100%;
}

.suspended_orderitems_container{
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-wrap: wrap;
    .item{
        width: 50%;
        background: #fff;
        box-sizing: border-box;
        border-bottom: 1px solid $orderBorderColor;
        border-right: 1px solid $orderBorderColor;
    }
     .tip.item{
        background: none;        
        padding: $contentRowPadding pxTorem(10px);
        line-height: 1;
    }

    .bottom{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1px $orderBorderColor;
    }
}

.suspended_orderitem_container{ 
    padding: $contentRowPadding pxTorem(10px);
    .item_info{
        display: flex;
        align-items: baseline;
    }
    .item_name{
        flex: 1;
    }
    .icon, .min_btn{
        align-self: center;
    }
    .icon{
        position: relative;
        font-size: $fontSize-30;
    }
    .icon::after{
        content: "";
        padding: 30px;
        margin-left: -45px;
        margin-top: -18px;
        position: absolute;
    }
    .min_btn{
        color: #fff;
        text-align: center;
        display: inline-block;
        width: $height-40;
        height: $height-40;
        line-height: $height-40;
        border-radius: $radius;
    }
    .delete_line{
        position: relative;

        &::before{
            top: 50%;
            width: 80%;
            content: "";
            height: $height-4;
            position: absolute;
            background: #d92b2b;
            line-height: $height-4;
            margin-top: - pxTorem(2px);
        }
    }
    .cancel_item{
        background: #d92b2b;
    }
    .hurry_item{
        background: #ff8800;
    }
    .modifier{
        color: #fff;
        margin-left: pxTorem(40px);
        display: flex;
        align-items: flex-start;
        flex-flow: row wrap;
        &>span{            
            background: #4d4d4d;
            border-radius: $radius;
            margin-top: pxTorem(10px);
            padding-left: $contentRowPadding;
            padding-right: $contentRowPadding;
            margin-right: $contentRowPadding;
            font-size: $fontSize-20;
        }
    }
}
.deliver_order_item{
    background: #fff;
}

.suspended_orderitem_container,
.deliver_orders_container{     
    font-size: $fontSize-25;
    
    .item_num{
        text-align: center;
        display: inline-block;
        border-radius: $radius;
        margin-right: $contentRowPadding;
        min-width: pxTorem(30px)
    }
    .more_items{
        color: #fff;
        background: #333333;        
        min-width: pxTorem(30px);
        height: pxTorem(30px);
        line-height: pxTorem(30px);
    }

}
.deliver_orders_container{
    li{
        border-bottom: 1px solid $orderBorderColor;
    }
    .bottom{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        border-top: 1px solid $orderBorderColor;
    }
}
.classify_items_container{
    display: flex;
    flex-direction: column;
    height: 100%;

    .bottom{
        position: absolute;
        left: 0;
        right: 0;
        border-top: 1px solid $orderBorderColor;
    }
    .category{
        text-align: center;
        padding: 0;
        background: $contentBackgroud;
    }
}
.classify_items_list{
    .scroll_item{
        width: 50%;
        border-bottom: 1px solid $orderBorderColor;
        border-left: 1px solid $orderBorderColor;
    }

    .item{
        border-right: 1px solid $orderBorderColor;
    }
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-wrap: wrap;
}
.deliver_orders_container{
    .deliver_order_item{
        font-size: $fontSize-20;
    }
    .deliver_order_title{
        text-align: center;
    }
    
}
.center_part{    
    .process{
        display: flex;
        height: 3.15rem;
        align-items: center;
        padding: 0;
    }
    .status,
    .order_title,
    .tip{
        padding: $contentColPadding $contentRowPadding;
    }
    .order_title{
        flex: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: $fontSize-25;
    }
    .status{
        white-space: nowrap;
        font-size: $fontSize-20;
    }
    .toggle_btn{
        color: #fff;
        align-self: stretch;
        white-space: nowrap;
        font-size: $fontSize-25;
        background: #4a4e54;
        padding-left: $contentRowPadding;
        padding-right: $contentRowPadding;
        .iconfont{
            font-size: $fontSize-20;
        }
    }    
}

.check_out{
    .waiting_out{
        float: right;
    }
    .order_name{
        font-size: $fontSize-42;
    }
    .check_out_btn{
        height: pxTorem(110px);
        line-height: pxTorem(110px);
        background: #0068b2;
        color: #fff;
        text-align: center;
        font-size: $fontSize-35;
    }
    .order_info{
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }
}

.suspended_order_list {
    flex-direction: column;
    display: flex;
    height: 100%;
    word-wrap: break-word;
    flex-wrap: wrap;
    suspended-order{
        height: auto;
        box-sizing: border-box;
        border-right: 1px solid $orderBorderColor;
    }
}
.suspende_orders_container{
    .bottom{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1px solid $orderBorderColor;
    }
}
.new_finished_suspended_orders{
    suspended-order{
        width: 33.333%;
    }
}
.new_finished_suspended_order{
    .material-icons{
        display: none;
    }
    .order_number{
        flex: 0 0 $width-50;
        font-size: 1rem;
        align-self: center;
        text-align: center;
    }
    
}